<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="customerTitle">
          <span>客户查询</span>
        </div>
      </template>
      <div class="customerDiv4">
        <el-form ref="ruleFormRef" label-width="100px" :model="formList">
          <el-row :gutter="24" justify="space-around">
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="使用组织" prop="use_org_id">
<!--                  <VabSelectForm v-if="show" v-model="formList.use_org_id" :options="organize_lists"/>-->
                  <el-select
                    v-model="formList.use_org_id"
                    clearable
                    filterable
                    :filter-method="query_o"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in organize_lists"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="客户编码" prop="number">
                  <el-autocomplete
                    @keyup.enter.native="enter"
                    v-model.trim="formList.number"
                    clearable
                    debounce="200"
                    :fetch-suggestions="querySearch2"
                    :trigger-on-focus="false"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="客户名称" prop="name">
                  <el-autocomplete
                    @keyup.enter.native="enter"
                    v-model.trim="formList.name"
                    clearable
                    debounce="200"
                    :fetch-suggestions="querySearch1"
                    :trigger-on-focus="false"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" >
              <div style="display: flex">
                <span class="customerDiv4_1">
                  <el-select
                    class="customerDiv1"
                    filterable
                    :model-value="value"
                    @change="handleSelectChange1"
                  >
                    <el-option
                      v-for="item in selectValue"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </span>
                <el-form-item class="customerDiv2" label="" :prop="value">
                  <el-select
                    v-if="value !== 'time' && value !== 'primary_group'"
                    v-model="formList[value]"
                    clearable
                    filterable
                    :filter-method="query_1"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in select11"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select
                    v-if="value === 'primary_group'"
                    v-model="formList[value]"
                    collapse-tags
                    multiple
                    collapse-tags-tooltip
                    clearable
                    filterable
                    :filter-method="query_1"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in select11"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-date-picker
                    v-if="value == 'time'"
                    v-model="formList[value]"
                    range-separator="-"
                    style="width: 100%"
                    type="daterange"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" >
              <div style="display: flex">
                <span class="customerDiv4_1">
                  <el-select
                    :model-value="value1"
                    class="customerDiv1"
                    filterable
                    @change="handleSelectChange2"
                  >
                    <el-option
                      v-for="item in selectValue1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </span>
                <el-form-item class="customerDiv2" label="" :prop="value1">
                  <el-select
                    v-if="value1 !== 'time'&& value1 !== 'primary_group'"
                    v-model="formList[value1]"
                    clearable
                    filterable
                    :filter-method="query_2"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in select12"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select
                    v-if="value1 === 'primary_group'"
                    v-model="formList[value1]"
                    collapse-tags
                    multiple
                    collapse-tags-tooltip
                    clearable
                    filterable
                    :filter-method="query_2"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in select12"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-date-picker
                    v-if="value1 == 'time'"
                    v-model="formList[value1]"
                    range-separator="-"
                    style="width: 100%"
                    type="daterange"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" >
              <div style="display: flex">
                <span class="customerDiv4_1">
                  <el-select
                    :model-value="value2"
                    class="customerDiv1"
                    filterable
                    @change="handleSelectChange3"
                  >
                    <el-option
                      v-for="item in selectValue2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </span>
                <el-form-item class="customerDiv2" label="" :prop="value2">
                  <el-select
                    v-if="value2 !== 'time' && value2 !== 'primary_group'"
                    v-model="formList[value2]"
                    clearable
                    filterable
                    :filter-method="query_3"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in select13"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select
                    v-if="value2 === 'primary_group'"
                    v-model="formList[value2]"
                    collapse-tags
                    multiple
                    collapse-tags-tooltip
                    clearable
                    filterable
                    :filter-method="query_3"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in select13"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-date-picker
                    v-if="value2 == 'time'"
                    v-model="formList[value2]"
                    range-separator="-"
                    style="width: 100%"
                    type="daterange"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout1">
              <div class="customerDiv5">
                <el-button v-debounce="query" type="primary">
                  查询
                </el-button>
                <el-button v-debounce="resetting">
                  重置
                </el-button>
<!--                <div class="sqFontSize" @click="retractClick">
                  更多
                  <el-icon v-if="retract"><ArrowUp /></el-icon>
                  <el-icon v-else><ArrowDown /></el-icon>
                </div>-->
              </div>
            </el-col>
          </el-row>
        </el-form>

      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import {customer_optionsList} from "/@/api/dms/customer";

  defineOptions({
    name: 'Query',
  })
  import { ref, defineProps } from 'vue'
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  import lodash from "lodash"
  import {organization_list} from "/@/api/dms/organization";
  const ruleFormRef = ref<any>(null)
  const number_list = ref([])
  const name_list = ref([])
  const props = defineProps(['formData','type','typeNumber_2','typeNumber_1','organizationList','customer_category','currency','settle_type','invoice_type','account_country','settlement_type','customerGroupList'])
  const $emits = defineEmits(['update:formData','update:type','update:typeNumber_2','update:typeNumber_1'])
  // const formList = reactive(props.formData)
  const enter = ()=>{
    $emits('update:formData', formList.value)
    $emits('update:type',1)
    $emits('update:typeNumber_1',props.typeNumber_1+ 1)
  }
  const colLayout = {    xs: 24,    sm: 12,    md: 12,    lg: 8,    xl: 8, span:8 }
  const colLayout2 = {    xs: 24,    sm: 24,    md: 24,    lg: 8,    xl: 8, span:8 }
  const colLayout1 = {    xs: 24,    sm: 24,    md: 24,    lg: 24,    xl: 24, span:8 }
  //收起
  const retract = ref(false)
  const retractClick = ()=>{
    retract.value = ! retract.value
  }

const organize_lists = ref([...props.organizationList] || [])
  const organize_list1 = ref([...props.organizationList] || [])
  const customer_category_list = ref([...props.customer_category] || [])
  const customerGroupList = ref([...props.customerGroupList] || [])
  const currency_list = ref([...props.currency] || [])
  const invoice_type_list = ref([...props.invoice_type] || [])
  watchEffect(()=>{
    organize_lists.value = [...props.organizationList] || []
    organize_list1.value = [...props.organizationList] || []
    customer_category_list.value = [...props.customer_category] || []
    customerGroupList.value =  [...props.customerGroupList] || []
    currency_list.value = [...props.currency] || []
    invoice_type_list.value =  [...props.invoice_type] || []
  })
  //查询
  const value = ref<any>('status')
  const value1 = ref('cust_type_id')
  const value2 = ref('primary_group')
  const options = [
    { value: 'status', label: '客户状态' },
    { value: 'cust_type_id', label: '客户类别' },
    { value: 'primary_group', label: '客户分组' },
    { value: 'is_group', label: '集团客户' },
    { value: 'trading_curr_id', label: '结算币别' },
    { value: 'price_list_id', label: '价目表' },
    // { value: 'zz5', label: '税分类' },
    { value: 'invoice_type', label: '发票类型' },
    { value: 'is_credit_check', label: '启用信用管理' },
    { value: 'create_name', label: '创建人' },
    { value: 'update_name', label: '更新人' },
    // { value: 'time', label: '时间' },
  ]
  const optionList1:any =(va:any)=>{
    if(va == 'status'){
      return[
        { value: 1, label: '待审核' },
        { value: 0, label: '暂存' },
        { value: 2, label: '已审核' },
        { value: 3, label: '待完善' },
        { value: 4, label: '已更新' },
      ]
    }else if(va == 'cust_type_id'){
      return customer_category_list.value
    }else if(va == 'primary_group'){
      return customerGroupList.value
    }else if(va == 'is_group'){
      return[
        { value: 1, label: '是' },
        { value: 0, label: '否' },
      ]
    }else if(va == 'trading_curr_id'){
      return currency_list.value
    }else if(va == 'price_list_id'){
      return[
        { value: 1, label: '价目表1' },
        { value: 0, label: '价目表2' },
      ]
    }else if(va == 'invoice_type'){
      return invoice_type_list.value
    }else if(va == 'is_credit_check'){
      return[
        { value: 1, label: '启用' },
        { value: 0, label: '禁用' },
      ]
    }else if(va == 'create_name'){
      return[
        { value: 'IT部测试', label: 'IT部测试' },
      ]
    }else if(va == 'update_name'){
      return[
        { value: 'IT部测试', label: 'IT部测试' },
      ]
    }
  }
  let formList = ref<any>({
    use_org_id: '1',
    number: '',
    name: '',
    status: '',
    cust_type_id: '1',
    primary_group: ['101728','101729','101730','101731','101733','101734','0',],
  })
  const selectValue = computed(() => {
    return options
      .filter((option) => option.value !== value1.value)
      .filter((option) => option.value !== value2.value)
  })
  const selectValue1 = computed(() => {
    return options
      .filter((option) => option.value !== value.value)
      .filter((option) => option.value !== value2.value)
  })
  const selectValue2 = computed(() => {
    return options
      .filter((option) => option.value !== value1.value)
      .filter((option) => option.value !== value.value)
  })
  const handleSelectChange1 = (newValue: any) => {
    formList.value[value.value] = ''
    value.value = newValue
  }
  const handleSelectChange2 = (newValue: any) => {
    formList.value[value1.value] = ''
    value1.value = newValue
  }
  const handleSelectChange3 = (newValue: any) => {
    formList.value[value2.value] = ''
    value2.value = newValue
  }

  // 模糊查询判断大小写
  const createFilter = (queryString: string) => {
    return (restaurant: any) => {
      return (
        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      )
    }
  }
  let select11 = ref<any>(optionList1(value.value))
  let select12 = ref<any>(customer_category_list.value)
  let select13 = ref(optionList1(value2.value))
  onMounted(()=>{
    customer_optionsList({is_group:2,name:''}).then((data:any)=>{
      if(data.code == 200){
        name_list.value=data.data?.map((va:any)=>{
          return{
            value:va.name,
            link:va.uid
          }
        }) || []
        number_list.value = data.data?.map((va:any)=>{
          return{
            value:va.number,
            link:va.uid
          }
        }) || []
      }
    })
  })
  //筛选
  const query_o = (value: any) => {
    organize_lists.value = organize_list1.value.filter((option: any) => {
      const Boo = (option?.label ?? '')?.toLowerCase().includes(value?.trim().toLowerCase())
      if (Boo) return option
    })
  }
  //筛选
  const query_1 = (va: any) => {
     select11.value = optionList1(value.value).filter((option: any) => {
      const Boo = (option?.label ?? '')?.toLowerCase().includes(va?.trim().toLowerCase())
      if (Boo) return option
    })
  }
  const query_2 = (va: any) => {
    select12.value = optionList1(value1.value).filter((option: any) => {
      const Boo = (option?.label ?? '')?.toLowerCase().includes(va?.trim().toLowerCase())
      if (Boo) return option
    })
  }
  const query_3 = (va: any) => {
    select13.value = optionList1(value2.value).filter((option: any) => {
      const Boo = (option?.label ?? '')?.toLowerCase().includes(va?.trim().toLowerCase())
      if (Boo) return option
    })
  }

  watch(value,()=>{
    select11.value = optionList1(value.value)
  })
  watch(value1,()=>{
    select12.value = optionList1(value1.value)
  })
  watch(customer_category_list,()=>{
    select12.value = customer_category_list.value
  })
  watch(customer_category_list,()=>{
    select12.value = customer_category_list.value
  })
  watch(value2,()=>{
    select13.value = optionList1(value2.value)
  })
  watch(customerGroupList,()=>{
    select13.value = customerGroupList.value
  })
  // 模糊查询函数
  const querySearch = (queryString: string, cb: any) => {
    const arr = props.organizationList?.map((va:any)=>{
      return{
        value:va.label,
        link:va.value
      }
    }) || []
    const results = queryString
      ? arr.filter(createFilter(queryString))
      : arr
    // call callback function to return suggestions
    cb(results)
  }
  const querySearch1 = (queryString: string, cb: any) => {
    const arr:any = name_list.value || []
    const results = queryString
      ? arr?.filter(createFilter(queryString))
      : arr
    // call callback function to return suggestions
    cb(results)
  }
  const querySearch2 = (queryString: string, cb: any) => {
    const arr:any = number_list.value || []
    const results = queryString
      ? arr?.filter(createFilter(queryString))
      : arr
    // call callback function to return suggestions
    cb(results)
  }
  // 查询
  const query = (va: any) => {
    $emits('update:formData', formList.value)
    $emits('update:type',1)
    $emits('update:typeNumber_1',props.typeNumber_1+ 1)
  }
  // 重置
  const resetting = () => {
    // ruleFormRef.value.resetFields()
   formList.value = {
      use_org_id: '1',
      number: '',
      name: '',
      status: '',
      cust_type_id: '1',
      primary_group: ['101728','101729','101730','101731','101733','101734','0'],
    }
    value.value = 'status'
    value1.value = 'cust_type_id'
    value2.value = 'primary_group'
    $emits('update:typeNumber_2',props.typeNumber_2+ 1)
    $emits('update:formData', {
      use_org_id: '1',
      number: '',
      name: '',
      status: '',
      cust_type_id: '1',
      primary_group: ['101728','101729','101730','101731','101733','101734','0'],
    })
    $emits('update:type',2)
  }
</script>

<style lang="scss" scoped>
  @import '../index';
</style>
